const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const isContext = process.env.NODE_ENV === 'work'

const newExtract = ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: "css-loader",
})

module.exports = {
    devtool: 'source-map',
    entry: {
        main: path.resolve(__dirname, './app/config/app.js')
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].js'
    },
    devServer: {
        hot: true,
        port: isContext ? 8080 : 2333,
        inline: true
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: newExtract
        }, {
            test: /\.styl$/,
            exclude: /node_modules/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: 'style-loader!css-loader!stylus-loader'
            })
        }, {
            test: /\.(png|jpg|jeg|gif|svg)$/,
            use: ['url-loader?limit=100&name=image/[name].[ext]']
        }, {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        }, {
            test: /\.vue$/,
            use: 'vue-loader'
        }, {
            test: /\.(woff|svg|eot|ttf)\??.*$/,
            loader: 'url-loader?limit=700&name=fonts/[hash].[ext]'
        }]
    },
    resolve: {
        extensions: ['.vue', '.js', '.json', '.css', '.styl'],
        alias: {
            'app': path.resolve(__dirname, './app'),
            'assets': path.resolve(__dirname, './app/assets'),
            'components': path.resolve(__dirname, './app/components'),
            'config': path.resolve(__dirname, './app/config'),
            'public': path.resolve(__dirname, './app/public'),
            'store': path.resolve(__dirname, './app/store')
        }
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin({
            filename: '[name].css'
        }),
        new HtmlWebpackPlugin({
            template: './app/index.html',
            inject: true,
            minify: {
                removeComponents: true,
                collapseWhitespace: false
            }
        })
    ]
}